<template>
  <div>
    <!-- <div class="box">
      这是box文本内容
      <p class="op">
        这是p
        <span>这是span</span>
      </p>
    </div> -->
    <div class="box"></div>

    <div class="box2"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
/*
  1 变量
  2 选择器嵌套规则
  3 计算
  4 继承
  5 混入 mixin
  
*/
/* // 定义变量
$bg: rgb(210, 221, 57);
.box{
  width: 200px;
  height: 200px;
  background-color: $bg;
} */
/* $bg: rgb(210, 221, 57);
.box{
  width: 300px;
  height: 300px;
  background-color: $bg;
  color: red;
  .op{
    color: blue;
    span{
      color: rgb(16, 232, 203);
      &:hover{
        color: red;
      }

    }
  }
} */
// + - * /
/*
  / 很长场景下 不会编译成 算数运算 /  css 值中 有 / 关键字
    如下情况会解析为计算
      1 在小括号中    (200px/10)
      2 100px+200px/10 参与其他运算
      3 有变量 $width/2;
    普通 编译 分隔符
    height: 200px/10;  这不是除法  而是 分隔符
*/
/* $width: 200px;
.box{
  width: 100px+200px;
  // height: (200px/10);
  // height: 100px+200px/10;
  height: $width/2;
  background-color: red;
} */

// 继承  一个选择器 可以继承另一个选择器中所有的样式
/* .box{
  width: 200px;
  height: 200px;
  background-color: #ae1b1b;
}
.box2{
  // 使用extend继承 .box选择器样式
  @extend .box;
  margin-top: 20px;
  border: 10px solid #c7d047;
  border-radius: 10px;
} */

// 混入 定义重复代码块  （理解为函数，混入定义 1 不加括号 2 加括号可以传参）
// 使用 @mixin定义混入
/* @mixin box{
  width: 200px;
  height: 200px;
  background-color: #ae1b1b;
}
.box{
  // 使用 @include关键字 将混入 引入 某个选择器中
  @include box;
}
.box2 {
  @include box;
} */
// 定义混入时 加括号 定义形参
@mixin box($color:#dc5566){
  width: 200px;
  height: 200px;
  background-color: $color;
}
// 不传参 include时候可以不加括号
.box{
  @include box;
}
// 引入混入时 加括号 给形参传递 实参
.box2{
  @include box(#77ddcc)
}
</style>
